<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
  
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/blog.css}">  
    <!-- require APlayer -->
    <link href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" rel="stylesheet">
    <!-- typo排版 -->
    <link rel="stylesheet" th:href="@{/static/css/typo.css}">
    <link rel="stylesheet" th:href="@{/static/lib/prism/prism.css}">
    <link rel="stylesheet" th:href="@{/static/lib/tocbot/tocbot.css}">
    
    <!-- 引入 layui.js -->
    <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
   <script src="/static/lib/prism/prism.js"></script>
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">

    


   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	    
	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
	  
</script>

<div th:replace="fragment/head::head"> 

</div>
 
 

    <div class="container mt-4" id="waypoint">
      
 <!-- 公告 -->
      <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left:20px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
           <a href="/types" style="color: darkgray">分类 </a>  
           <i class="icon angle double right"> </i>
           <span th:text="${blogxq.title}">  </span> 
           </p>
         </div>
       </div>


       <!-- 内容 -->
        <div class="row" style="margin-top: 20px">
        
            <div class="col-lg-8 col-sm-12 top layui-anim layui-anim-up">
            
               <div class="ui" >
                 <div class="ui top attached segment">
                 
                 <!-- 头部内容 -->
                 <h4 th:text="${blogxq.title}" class="bloghead"></h4>
                 </br>
                 <p style="color:darkgray;text-align:center">
                 <span th:class="${blogxq.flag=='原创'?'ui green label':'ui yellow label'}" style="font-size: 10px" th:text="${blogxq.flag}">原创</span>&nbsp;&nbsp;
                 
                   <i class="layui-icon layui-icon-friends" style="font-size:0.8rem;color: darkgray"></i>
                   <span href="#" >益达</span> &nbsp;&nbsp;
                   
                     <i class="layui-icon layui-icon-time" style="font-size:0.8rem;color: darkgray"></i> <span  th:text="${blogxq.getReleaseDate()}"></span>&nbsp;&nbsp;
                     
                 <!-- 眼睛 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                   <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                   <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                 </svg>
                 
                  <span th:text="${blogxq.getClickHit()}"></span>&nbsp;&nbsp;
                  <!-- 评论 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16">
                      <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                      <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                 </svg>
                    <span th:text="${blogxq.replyHit.size()}"></span>&nbsp;&nbsp;
                    <!-- 博客详情标签 -->
                    
                    
                    <a  th:href="@{'/types?id='+${blogxq.typeID.id}}" class="lianjie2">    
                      <i class="layui-icon   layui-icon-tabs" ></i>
                      <span th:text="${blogxq.typeID.type}"></span>
                    </a>
                 
                   </p>
                   
                 </div>
                
                <div class="ui attached segment">
                    <img th:src="${blogxq.imgurl}"  alt="" class="ui fluid rounded image">  
                </div>
                
            <div class="ui attached segment">
                  
                  
        <!-- 将来替换的内容 -->
          <div class="typo typo-selection js-toc-content" th:utext="${blogxq.content}">
    
          </div>
            
          <br/>
              <div class="ui aligned basid segment">
                 
                  <a th:each="tag,tagStat:${blogxq.tags}" >
                       <i class="tags icon"> </i> 
                       <a th:href="@{'/blog/index?id='+${tag.id}}" th:text="${tag.name}" class="lianjie2"> </a>&nbsp;
                   </a>
              </div>
          
                    
                <!-- 底部内容 -->
                <div th:if="${blogxq.appreciation}" class="ui center aligned basid segment"> 
                  <button class="ui orange basic circular button" id="zanshang">赞赏</button>
                </div>
                
            <!-- 赞赏的图片 -->
              <div  class="ui ewx  flowing popup transition hidden" style="padding: 2px">
                <div class="ui orange  basic label">
                   <div class="ui images" style='font-size: inherit;'>
                      <div class="image">
                        <img src="../static/img/zfbds.jpg" class="ui rounded bordered image" width="100px">
                       </div>           
                       <div class="image">
                        <img src="../static/img/wxds.jpg" class="ui rounded bordered image" width="100px">
                       </div>
                       <p align="center">一元足以感动我＾＿＾ ~</p>
                    </div>
                </div>
             </div> 
             
             
       </div>
                <div id="taiozhuan"> </div>
                <div th:if="${blogxq.shareStatement}" class="ui attached positive message">                
                <!--博客信息-->
                   <div class="ui middle grid">
                   
                     <div class=" wide column">
                        <ui>  
                           <li >声明：本文由 <a href="/blog/index"> Smile</a> 原创出品，转载请注明出处！ </li>
                           <li>本文链接：<span id="bloghref"> </span> </li>
                        </ui> 
                     </div>
                
                     
                   </div>
                
                 </div>
                 
                 
           <!-- 评论区域 -->
           <div  class="ui botton attached  segment">
                 
          <!-- 留言区域列表 -->
         <div id="comment-container" class="ui teal segment">
         
         <div th:fragment="commentList">    
             
  <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        
                        <div th:each="comment : ${comments}"  class="comment" >
                            <a class="avatar">
                                <img th:src="${comment.imgurl}" >
                            </a>
                            <div class="content">
                                <span class="author" >
                                    <a class="acomment" th:href="@{${comment.bloggerhref}}" th:text="${comment.nickname}">Matt</a>
                                    <div th:if="${comment.adminComment == 0 }"  class="ui mini basic green left pointing label m-padded-mini">游客</div>
                                    <div th:if="${comment.adminComment == 1 }"  class="ui mini basic red left pointing label m-padded-mini">博主</div>
                                    <div th:if="${comment.adminComment == 2 }"  class="ui mini basic blue left pointing label m-padded-mini">友人</div>

                                </span>
                                <div class="metadata">
                                    <span th:text="${#dates.format(comment.conmmentDate,'yyyy-MM-dd')}" class="date">Today at 5:42PM</span>
                                </div>
                                <div th:text="${comment.content}" class="text" >
                                    How artistic!
                                </div>
                                <div class="actions">
   <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"   onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            
                            <div class="comments" th:if="${comment.replycommenet.size()>0}">
                                <div class="comment" th:each="reply : ${comment.replycommenet}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.imgurl}}">
                                    </a>
                                    <div class="content">
                                        <span class="author" >
                                            <a class="acomment" th:href="@{${reply.bloggerhref}}" th:text="${reply.nickname}">小红</a>
                                            <div th:if="${reply.adminComment == 0 }"   class="ui mini basic green left pointing label m-padded-mini" >游客</div>
                                            <div th:if="${reply.adminComment == 1 }"   class="ui mini basic red left pointing label m-padded-mini" >博主</div>
                                            <div th:if="${reply.adminComment == 2 }"   class="ui mini basic blue left pointing label m-padded-mini" >友人</div>
                                             <i class="layui-icon layui-icon-triangle-r"></i>
                                            &nbsp;<span th:text="${reply.parentComment.nickname}" class="m-teal">@ 小白</span>
                                        </span>
                                        <div class="metadata">
                                            <span th:text="${#dates.format(reply.conmmentDate,'yyyy-MM-dd')}" class="date">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                  
                        

                    </div>
 </div>
 </div>
  
  
  
  
  <!-- 提交留言的区域 -->
   <div id ="comment-form" class="ui reply form">
     <input type="hidden" name="blogId" th:value="${blogxq.id}">
     <input type="hidden" name="replyid" value="-1">
    <div class="field">
      <textarea name="content" placeholder="请输入评论信息"></textarea>
    </div>
    
    <!-- 隐藏得两个输入框 -->
    <div class="fields" style="display: none;">

      <div class="field m-margin-bottom-mini" style="width: 50%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="nickname" th:value="${session.user!=null?session.user.nickname:null}" placeholder="昵称"></textarea>
        </div>
      </div>
      
      <div class="field m-margin-bottom-mini" style="width: 50%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="qq" th:value="${session.user!=null?session.user.id:''}" placeholder="QQ号"></textarea>
        </div>
      </div>
	  
   </div>
     
     <div class="fields m-margin-bottom-mini"> 
       <div class="field" style="width: 100%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="bloggerhref" placeholder="网址(选填)"></textarea>
        </div>
      </div>
     </div>
   
     <div >
        <button th:if="${session.user!=null}" id="commentpost-btn" th:onclick="commentpost([[${session.user.email!=null?session.user.email:''}]])" style="width: 100%;" class="ui  green teal button"> <i class="icon edit"></i> 发布</button>
        <a th:if="${session.user==null}" href="/login"><button  style="width: 100%;" class="ui  green teal button"> <i class="icon edit"></i> 请登录</button> </a> 
     </div>
     
  </div>
  
  </div>
                        
                    
       </div>
 
              
         <div class="col-sm-12 top">
            
         </div>
	
	<!-- 对应占8分的区域 -->	 
  </div>
      
       
        
           <div class="col-lg-4 col-sm-12 col-12  top"> 
                
                                   
       <!-- 标签 -->
             <div class="ui segments layui-anim layui-anim-up">
            <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="tags icon"> </i>标签
              </div>
              <div class="right aligned column">
                 <a href="#" target="_blank">more <i class="angle double right icon"> </i> </a>
               </div>
             </div>           
             </div>
             
             <div class="ui teal segment">
             
               <a th:each="tag,tagStat:${tags}"   th:href="@{'/blog/index?id='+${tag.id}}" target="_black" class="ui teal basic left pointing label m-margin-tb-tiny">
                  <span th:text="${tag.getName()}"> </span>
                </a>
                
              </div>
            </div>
            
          <!-- 最新文章 -->  
           <div class="ui segments top layui-anim layui-anim-up">
           
              <div class="ui secondary segment">
               <i class="layui-icon layui-icon-refresh-3"></i> 最新文章
              </div>
              
               <div th:each="blog,blogStat:${blogxin}" class="ui segment fonts">
                  <div class="ui two column grid">
                  
                     <div class="column left" style="width:77%">
                         <span th:text="${blogStat.count}" th:style="'background-color:'+ ${blogStat.count<=3? '#ff5722':'#1e9fff'} +';padding-left:6px;padding-right:5px'"> </span> &nbsp; <a href="#" target="_blank" class="m-black m-text-thin fonts"> <span th:text="${blog.title}">用户故事</span>  </a>
                     </div>
                  
                      <div class="right aligned column" style="width:23%;padding-left:0">
                        <i class="eye icon"> </i> <span th:text="${blog.clickHit}">15</span>
                      </div>
                      
                   </div> 
                   
               </div>

          </div>
        
        




       
       <!-- 对应的占四分的阑珊 -->
       </div>
       
        <!--对应class="row"  -->
       </div>
       
      <!--对应的最外层的标签 -->
    </div>
    
    
    <!-- qq模块 -->
<div class="ui qq flowing popup transition hidden"style="padding: 2px">
  <div class="ui orange basic label" >
     <div class="image">
      <img src="../static/img/qq.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- wx模块 -->
 <div class="ui wx flowing popup transition hidden" style="padding: 2px">
  <div class="ui orange basic label">
     <div class="image">
      <img src="../static/img/wx.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- 留言模块 -->
  <div class="ui ly flowing popup transition hidden" >
       去留言~
  </div>
 
  <!-- 音乐组件 -->
    <div>
      <meting-js 
	           server="tencent" 
	           type="playlist" 
	           id="8172845083"
	           loop="all"
	           order="random"
	           preload="auto"
	           fixed="true" mini="true"
	           >
     </meting-js>
   </div>
  
  <!-- 屏幕右边按钮组 -->
  <div  id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
    <div class="ui vertical icon buttons">
        <button id="mulu"  class="ui teal button">目录 </button>
        <a  href="#taiozhuan" class="ui teal button">评论</a>
        <button id="fenxiang" class="ui wechat icon button"><i class="weixin icon"></i></button>
        <a href="#waypoint" id="toTop-button" class="ui icon button" ><i class="chevron up icon"></i></a>
    </div>
 </div>
 

<!-- 生成的目录 -->
  <div class="ui mulu flowing popup transition hidden" style="width:200px">
       <ol class="js-toc">
       
       </ol>
  </div>
 
 
 <!-- 生成文章的二维码 -->
 <div class="ui fenxiang flowing popup transition hidden" style="padding:0px">
  <div class="ui orange basic label">
     <div class="image" id="qrcode">
         &nbsp;&nbsp;&nbsp;&nbsp;<span>扫码阅读</span>
       <!-- <img src="../static/img/wx.jpg" style="width:80px"/> --> 
     </div>
  </div>
 </div>
 
</body>
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
   <!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="/static/lib/tocbot/tocbot.js"></script>
<script src="/static/lib/qrcode/qrcode.min.js"></script>
<script src="/static/lib/waypoints/jquery.waypoints.js"></script>
<script type="text/javascript">
  $('#zanshang').popup({
        popup : $('.ewx'),
        on : 'click',
        position: 'top center'
    });
    
    $('#mulu').popup({
        popup : $('.mulu'),
        on : 'click',
        position: 'left center'
    });
    
     $('#fenxiang').popup({
        popup : $('.fenxiang'),
        on : 'hover',
        position: 'left center'
    });
   
   //初始化目录
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
    });
    
    <!--生成二维码-->
    var qrcode = new QRCode("qrcode", {
        text: window.location.href,
        width: 80,
        height: 80,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    
      $('#toTop-button').click(function () {
        $(window).scrollTo(0,400);
    });
    
   
    <!--滚动监测-->
     var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        
        handler: function(direction) {
            if (direction == 'down') {
                $('#toolbar').show(500);
            } else {
                $('#toolbar').hide(500);
            }
        }
    });
    
   $("#bloghref").html(window.location.href);
    
   $(".typo img").addClass("ui fluid rounded image");  
    
    
   //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            }
        }
    });


    var temporaryemail;

     function commentpost(email) {
         temporaryemail = email;
         //判断用户的邮箱是否为空
         if (email==""){
             //获取layui的layer
             layui.use('layer', function() {
                 var layer = layui.layer;
                 layer.msg('绑定邮箱可即时收到回复');
             });
         }

        var boo = $('.ui.form').form('validate form');
       
        if (boo) {
            console.log('校验成功');
            postData();
        } else {
            console.log('校验失败');
        }

    };
    
     function postData() {

        $("#comment-container").load("/blog/post",{
            "blogxqid" : [[${blogxq.id}]],
            "email"  : temporaryemail,
            "replyid" : $("[name='replyid']").val(),
            "blogId" : $("[name='blogId']").val(),
            "nickname": $("[name='nickname']").val(),
            "qq"   : $("[name='qq']").val(),
            "content" : $("[name='content']").val(),
            "bloggerhref" : $("[name='bloggerhref']").val(),
            
        },function (responseTxt, statusTxt, xhr) {
        // $(window).scrollTo($('#taiozhuan'),500);

                layui.use('layer', function() {
                    var layer = layui.layer;

                    if (temporaryemail=="") {
                        setTimeout(" layer.msg('评论成功！', {icon: 1})", 800 );

                    }else {
                        layer.msg('评论成功！', {icon: 1});
                    }

                });

         clearContent();
        });
    }
    
    
      function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='replyid']").val(commentId);

         //获取元素的高度
        //   var  height= document.getElementById("#comment-form").clientHeight;
        //    alert(height);
        // $(window).scrollTo(height,500);
    }

  function clearContent() {
      $("[name='content']").val('');
      $("[name='replyid']").val(-1);
      $("[name='content']").attr("placeholder", "请输入评论信息...");
  }
   
     
     
     //图片预览
     function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;     
        
//屏幕的宽度
        var width = document.body.scrollWidth;
        
      
        if(width < 500) {
            img.width = width * 0.9;
        }
         if(width >= 500 & width <= 900) {
            img.width = width * 0.8;
        }
        if(width > 900) {
            img.width = width * 0.6;
        }
    
        var imgHtml = "<img src='" + img.src + "' width='"+img.width+"' />";
       
  //获取layui的layer
    layui.use('layer', function(){
              var layer = layui.layer;
           
       //弹出层
        layer.open({
            type: 1,
            offset: '120px',
            shadeClose:true,//点击外围关闭弹窗
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            
        });
     
       });  
     
    }
</script>

</html>